<template>
  <div>
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <p>fullName: {{fullName}}</p>
    <p>fullName: {{fullName}}</p>
    <p>fullName2: {{fullName2}}</p>
    <p>fullName2: {{fullName2}}</p>
    <p>fullName3: {{fullName3()}}</p>
    <p>fullName3: {{fullName3()}}</p>
  </div>
</template>

<script>
export default {
  name: 'Test',

  data () {
    return {
      firstName: 'A',
      lastName: 'B',
      fullName2: 'A-B',
      arr: [{name: 'AA'}, {name: 'BB'}]
    }
  },

  methods: {
    fullName3 () {
      console.log('method fullName3')
      return this.firstName + '-' + this.lastName
    }
  },

  computed: {
    arrlenth () {
      this.arr.length
    },

    fullName () { // 相当于监视了firstName和lastName
      console.log('computed fullName')
      // 可以延迟1s异步返回计算结果呢?  不可以
      // setTimeout(() => {
      //   return this.firstName + '-' + this.lastName
      // }, 1000);

      // 必须同步返回计算结果
      return this.firstName + '-' + this.lastName
    }
  },

  watch: {
    firstName (value) {
      console.log('watch firstName')
      setTimeout(() => {
        this.fullName2 = value + '-' + this.lastName
      }, 1000);
      // this.fullName2 = value + '-' + this.lastName
    },

    lastName (value) {
      setTimeout(() => {
        this.fullName2 = this.firstName + '-' + value
      }, 2000)
      // this.fullName2 = this.firstName + '-' + value
    },
  }
}
</script>

<style scoped>

</style>
